<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>角色管理</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css">
</head>

<body class="layui-layout-body">
    <!-- 布局代码与用户管理类似，省略重复部分 -->

    <div class="layui-body" style="padding: 0; position: absolute; top: 0; bottom: 0; left: 0; right: 0;">
        <div style="padding: 15px;">
            <div class="layui-row">
                <div class="layui-col-md12">
                    <h1>角色管理</h1>

                    <div style="margin-bottom: 20px;">
                        <button class="layui-btn" id="addRoleBtn">添加角色</button>
                    </div>

                    <table class="layui-table" lay-data="{id:'roleTable', height:'full-150', page:true}"
                        lay-filter="roleTable">
                        <thead>
                            <tr>
                                <th lay-data="{field:'id', width:80, sort:true}">ID</th>
                                <th lay-data="{field:'name', width:200}">角色名称</th>
                                <th lay-data="{field:'menu_count', width:120}">菜单数量</th>
                                <th lay-data="{field:'action', width:300, toolbar:'#roleActionBar'}">操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {% for role in roles %}
                            <tr>
                                <td>{{ role.id }}</td>
                                <td>{{ role.name }}</td>
                                <td>
                                    {% if role.role_menus|length > 0 %}
                                    <a href="javascript:;" class="layui-btn layui-btn-xs layui-btn-normal" lay-event="showMenus">{{ role.role_menus|length }}</a>
                                    {% else %}
                                    0
                                    {% endif %}
                                </td>
                                <td></td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- 添加/编辑角色表单 -->
    <div id="roleForm" style="display: none; padding: 20px;">
        <form class="layui-form" lay-filter="roleForm">
            <input type="hidden" name="id">
            <div class="layui-form-item">
                <label class="layui-form-label">角色名称</label>
                <div class="layui-input-block">
                    <input type="text" name="name" required lay-verify="required" placeholder="请输入角色名称"
                        autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="roleFormSubmit">提交</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </form>
    </div>

    <!-- 菜单分配表单 -->
    <div id="menuAssignForm" style="display: none; padding: 20px;">
        <table class="layui-table" lay-skin="line" lay-filter="menuTable">
            <thead>
                <tr>
                    <th>菜单名称</th>
                    <th>URL</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody id="menuListBody"></tbody>
        </table>
    </div>

    <!-- 操作列模板 -->
    <script type="text/html" id="roleActionBar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="assign">分配菜单</a>
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="showMenus">查看菜单</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>



    <script src="/static/layui/layui.js"></script>
    <script>
        layui.use(['table', 'form', 'jquery', 'layer'], function () {
            var table = layui.table;
            var form = layui.form;
            var $ = layui.jquery;
            var layer = layui.layer;

            // 添加角色
            $('#addRoleBtn').on('click', function () {
                layer.open({
                    type: 1,
                    title: '添加角色',
                    area: ['500px', '200px'],
                    content: $('#roleForm'),
                    success: function () {
                        form.val('roleForm', {
                            id: '',
                            name: ''
                        });
                    }
                });
            });

            // 表格操作
            table.on('tool(roleTable)', function (obj) {
                var data = obj.data;
                if (obj.event === 'del') {
                    layer.confirm('确认删除该角色吗？', function (index) {
                        $.post('/admin/roles/delete/' + data.id, function (res) {
                            if (res.success) {
                                obj.del();
                                layer.close(index);
                            } else {
                                layer.msg(res.msg || '删除失败');
                            }
                        });
                    });
                } else if (obj.event === 'edit') {
                    layer.open({
                        type: 1,
                        title: '编辑角色',
                        area: ['500px', '200px'],
                        content: $('#roleForm'),
                        success: function () {
                            form.val('roleForm', {
                                id: data.id,
                                name: data.name
                            });
                        }
                    });
                } else if (obj.event === 'assign') {
                    // 分配菜单
                    layer.open({
                        type: 1,
                        title: '分配菜单 - ' + data.name,
                        area: ['600px', '500px'],
                        content: $('#menuAssignForm'),
                        success: function () {
                            $('#menuListBody').empty();
                            $.get('/admin/roles/menus/' + data.id, function (res) {
                                if (res.success) {
                                    var html = '';
                                    res.menus.forEach(function (menu) {
                                        html += '<tr>';
                                        html += '<td>' + menu.name + '</td>';
                                        html += '<td>' + menu.url + '</td>';
                                        if (menu.has) {
                                            html += '<td><button class="layui-btn layui-btn-xs layui-btn-danger unassign-btn" data-id="' + menu.id + '">移除</button></td>';
                                        } else {
                                            html += '<td><button class="layui-btn layui-btn-xs assign-btn" data-id="' + menu.id + '">分配</button></td>';
                                        }
                                        html += '</tr>';
                                    });
                                    $('#menuListBody').html(html);

                                    // 绑定分配按钮事件
                                    $('.assign-btn').on('click', function () {
                                        var menu_id = $(this).data('id');
                                        $.post('/admin/roles/add_menu', {
                                            role_id: data.id,
                                            menu_id: menu_id
                                        }, function (res) {
                                            if (res.success) {
                                                layer.msg('分配成功');
                                                setTimeout(function () {
                                                    window.location.reload();
                                                }, 1000);
                                            } else {
                                                layer.msg(res.msg || '分配失败');
                                            }
                                        });
                                    });

                                    // 绑定移除按钮事件
                                    $('.unassign-btn').on('click', function () {
                                        var menu_id = $(this).data('id');
                                        $.post('/admin/roles/remove_menu', {
                                            role_id: data.id,
                                            menu_id: menu_id
                                        }, function (res) {
                                            if (res.success) {
                                                layer.msg('移除成功');
                                                setTimeout(function () {
                                                    window.location.reload();
                                                }, 1000);
                                            } else {
                                                layer.msg(res.msg || '移除失败');
                                            }
                                        });
                                    });
                                }
                            });
                        }
                    });
                } else if (obj.event === 'showMenus') {
                    // 查看菜单
                    $.get('/admin/roles/menus/' + data.id, function (res) {
                        if (res.success) {
                            var menus = res.menus.filter(function (menu) { return menu.has; });
                            var content = '<div style="padding: 20px;"><ul class="layui-timeline">';
                            menus.forEach(function (menu) {
                                content += '<li class="layui-timeline-item"><i class="layui-icon layui-timeline-axis"></i>';
                                content += '<div class="layui-timeline-content layui-text"><h3 class="layui-timeline-title">' + menu.name + '</h3>';
                                content += '<p>URL: ' + menu.url + '</p></div></li>';
                            });
                            content += '</ul></div>';

                            layer.open({
                                type: 1,
                                title: data.name + '的菜单',
                                area: ['500px', '400px'],
                                content: content
                            });
                        } else {
                            layer.msg('获取菜单失败');
                        }
                    });
                }
            });

            // 表单提交
            form.on('submit(roleFormSubmit)', function (data) {
                var url = data.field.id ? '/admin/roles/edit/' + data.field.id : '/admin/roles/add';
                $.post(url, data.field, function (res) {
                    if (res.success) {
                        layer.msg('操作成功', { icon: 1 });
                        setTimeout(function () {
                            window.location.reload();
                        }, 1000);
                    } else {
                        layer.msg(res.msg || '操作失败', { icon: 2 });
                    }
                });
                return false;
            });
        });
    </script>
</body>

</html>